<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<i class="fa fa-angle-left back-icon" @click="goBack"></i>
			<p>商家列表</p>
		</header>

		<!-- 商家列表部分 -->
		<div v-if="loading" class="loading">加载中...</div>
		<ul v-else-if="businessArr.length > 0" class="merchant">
			<li v-for="item in businessArr" :key="item.businessId" @click="toBusinessInfo(item.businessId)">
				<div class="merchant-img">
					<img :src="item.businessImg" />
					<div class="quantity" v-show="item.quantity > 0">
						{{ item.quantity }}
					</div>
				</div>
				<div class="merchant-info">
					<h3>{{ item.businessName }}</h3>
					<p>
						&#165;{{ item.starPrice }}起送 | &#165;{{ item.deliveryPrice }}配送
					</p>
					<p>{{ item.businessExplain }}</p>
				</div>
			</li>
		</ul>
		<div v-else class="empty-state">暂无商家信息</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import { ref, onMounted } from "vue";
import Footer from "../components/Footer.vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

export default {
	name: "BusinessList",
	components: {
		Footer,
	},
	setup() {
		const router = useRouter();
		const route = useRoute();

		const orderTypeId = ref(route.query.orderTypeId);
		const businessName = ref(route.query.businessName);
		const businessArr = ref([]);
		const user = ref({});
		const loading = ref(true);  // Loading state
		const error = ref(null);  // Error state

		// 返回上一页
		const goBack = () => {
			router.go(-1);
		};

		const getUserSession = () => {
			return JSON.parse(sessionStorage.getItem("user"));
		};

		const listCart = () => {
			let url = `CartController/listCart?userId=${user.value.userId}`;
			axios
				.get(url)
				.then((response) => {
					const cartArr = response.data.result;
					businessArr.value.forEach((businessItem) => {
						businessItem.quantity = 0; // 初始化商家商品数量
						cartArr.forEach((cartItem) => {
							if (cartItem.businessId === businessItem.businessId) {
								businessItem.quantity += cartItem.quantity;
							}
						});
					});
					businessArr.value.sort(); // 排序商家
				})
				.catch((error) => {
					console.error(error);
				});
		};

		const fetchBusinessByOrderTypeId = () => {
			if (orderTypeId.value !== undefined) {
				let url_1 =
				"BusinessController/listBusinessByOrderTypeId/" + orderTypeId.value;
				axios
					.get(url_1)
					.then((response) => {
						businessArr.value = response.data.result;
						if (user.value != null) {
							listCart(); // 如果用户已登录，获取购物车信息
						}
					})
					.catch((err) => {
						error.value = '商家信息加载失败，请稍后重试';
						console.error(err);
					})
					.finally(() => {
						loading.value = false; // 关闭加载状态
					});
			}
		};

		const fetchBusinessByKeyWords = () => {
			if (businessName.value !== undefined) {
				let url_2 = `BusinessController/listBusinessByKeyWords/${businessName.value}`;
				axios
					.get(url_2)
					.then((response) => {
						businessArr.value = response.data.result || [];
						if (user.value != null) {
							listCart(); // 如果用户已登录，获取购物车信息
						}
					})
					.catch((err) => {
						error.value = '商家信息加载失败，请稍后重试';
						console.error(err);
					})
					.finally(() => {
						loading.value = false; // 关闭加载状态
					});
			}
		};

		const toBusinessInfo = (businessId) => {
			router.push({
				path: "/businessInfo",
				query: {
					businessId: businessId,
				},
			});
		};

		onMounted(() => {
			user.value = getUserSession();
			if (orderTypeId.value) {
				fetchBusinessByOrderTypeId();
			} else if (businessName.value) {
				fetchBusinessByKeyWords();
			}
		});

		return {
			businessArr,
			toBusinessInfo,
			loading,
			error,
			goBack,
		};
	},
};
</script>

<style scoped>
/********* 总容器 *********/
.wrapper {
	width: 100%;
	background-color: #f2f2f2;
}

/********* 头部 *********/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color:royalblue;

	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;

	color: white;
	font-size: 5vw;
	font-weight: 700;
}

/*********商家列表*********/
.wrapper .merchant {
	width: 100%;
	padding-top: 12vw;
	padding-bottom: 20vw;
}

.wrapper .merchant li {
	display: flex;
	padding: 2.5vw;
	margin: 2vw;
	user-select: none;
	cursor: pointer;
	background-color: white;
	border-radius: 5vw;
}

.wrapper .merchant li .merchant-img {
	position: relative;
}

.wrapper .merchant li img {
	width: 20vw;
	height: 20vw;
	border-radius: 6vw;
}

.wrapper .merchant li .merchant-img .quantity {
	width: 4vw;
	height: 4vw;
	background-color: red;
	border-radius: 3vw;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 3vw;
	color: white;

	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}

.wrapper .merchant li .merchant-info {
	width: 100%;
	margin-left: 3vw;
}

.wrapper .merchant li .merchant-info h3 {
	margin-bottom: 2vw;
	color: darkslategrey;
	font-size: 4vw;
}

.wrapper .merchant li .merchant-info p {
	margin-bottom: 2vw;
	font-size: 3vw;
	color: gray;
}

/********* Loading and Empty State *********/
.loading,
.empty-state {
	text-align: center;
	font-size: 4vw;
	color: gray;
	padding: 20vw 0;
}

/* 返回箭头的样式 */
.back-icon {
	font-size: 36px;
	/* 设置图标的大小 */
	position: fixed;
	/* 固定在页面上，不会随内容滚动 */
	top: 13px;
	/* 距离页面顶部 13px */
	left: 20px;
	/* 距离页面左侧 20px */
	color: #1a2edf;
	/* 设置图标的颜色 */
	cursor: pointer;
	/* 鼠标悬停时显示为手型 */
}
</style>
